<!-- 提现记录 -->
<template>
  <van-nav-bar
    left-arrow
    :title="$t('wallet.drawTitle')"
    @click-left="
      router.push({
        path: '/wallet',
      })
    "
  >
    <template #right>
      <div class="draw-right" @click="onShow">
        {{ $t("wallet.drawFlag") }}
      </div>
    </template>
  </van-nav-bar>
  <table class="table draw">
    <tr class="table-th">
      <th v-for="item in list" :key="item">{{ $t(`wallet.${item}`) }}</th>
    </tr>
    <!-- {{nums  }} -->
    <tr
      v-for="(items, index) in nums"
      :key="index"
      class="table-tr"
      @click.stop="paydetail(items)"
    >
      <td>
        {{ items.date }}
      </td>
      <td>
        {{ items.money }}
      </td>
      <td>
        {{ items.bank }}
      </td>
      <td>
        <span :class="{ fail: nums.status == 3, success: nums.status == 1 }">{{
          items.statusName
        }}</span>
      </td>
    </tr>
  </table>

  <Empty :description="$t('wallet.noHistory')" v-if="!nums.length"></Empty>

  <van-action-sheet
    v-model:show="flag.show"
    :actions="flag.list"
    @select="onSelect"
    :title="$t('wallet.chooseType')"
    :cancel-text="$t('cancel')"
  />
</template>
<script setup>
import Empty from "@/components/Empty";
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { getWithdrawalRecord } from "@/api/card";
import dayjs from "dayjs";
const { t } = useI18n();
const router = useRouter();
const list = ["drawDate", "drawMoney", "drawFlow", "drawType"];
const nums = ref([]);
const flag = reactive({
  name: "",
  type: "",
  show: false,
  list: [
    // 交易明细
    { name: t("wallet.drawAll"), status: -1 },
    { name: t("wallet.drawDoing"), status: 0 },
    { name: t("wallet.drawSuccess"), status: 1 },
    { name: t("wallet.drawFail"), status: 2 },
  ],
  allList: [],
});
function onShow() {
  flag.show = !flag.show;
}
function paydetail(val) {
  router.push({
    path: "/payDetail",
    query: {
      item: JSON.stringify(val),
    },
  });
}
function onSelect(e) {
  let { name, status } = e;
  flag.name = name;
  if (status == -1) {
    nums.value = flag.allList;
  } else {
    nums.value = flag.allList.filter((v) => v.status == status);
  }
  onShow();
}
getWithdrawalRecord().then((res) => {
  console.log(res);
  if (res.code != 200) return;
  res.data.map((v) => {
    v.bank = `${v.bankName}(${v.bankCardNumber.slice(-4)})`;
    v.date = dayjs(v.addTime).format("YYYY.MM.DD");
    switch (v.status) {
      case 0:
        v.statusName = t("wallet.drawDoing");
        break;
      case 1:
        v.statusName = t("wallet.drawSuccess");
        break;
      case 2:
        v.statusName = t("wallet.drawFail");
        break;
    }
  });
  console.log("res.data");
  console.log(res.data);
  nums.value = res.data;
  flag.allList = res.data;
});
</script>
<style lang="less">
.draw {
  .success {
    color: #e50000;
  }
  .fail {
    color: #17c600;
  }
}
.draw-right {
  font-size: 12px;
  font-weight: 500;
}
</style>
